<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <!-- MOTW-DISABLED saved from url=(0014)about:internet -->
    <title>How to link a CSS file</title>
    <link rel="StyleSheet" href="css/format.css" type="text/css" media="all" />
    <link rel="StyleSheet" href="css/webworks.css" type="text/css" media="all" />
    <link rel="StyleSheet" href="webworks.css" type="text/css" media="all" />
    <script type="text/javascript" language="JavaScript1.2">
      <!--
        var  WebWorksRootPath = "";
      // -->
    </script>
  </head>
  <body>
    <div style="text-align: left;">
      <table cellspacing="0" summary="">
        <tr>
          <td>
            <a href="fm-HowToImportStyles.html"><img src="images/prev.gif" alt="Previous" border="0" /></a>
          </td>
          <td>
            <a href="fm-HowToApplyAStyle.html"><img src="images/next.gif" alt="Next" border="0" /></a>
          </td>
        </tr>
      </table>
    </div>
    <hr align="left" />
    <blockquote>
      <h4 class="N_hth_HowToHelp"><a name="292465">How to link a CSS file</a></h4>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023Format">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="311464">In Resource Explorer, right-click Shared Resources, then choose Add Resource, as shown in </a><a href="#311473" title="How to link a CSS file">Figure&nbsp;6-4</a>.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i2_Image2"><a name="311471"><img class="Default" src="images/addcssfile.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 6-4 Choose Add Resource" /></a></p>
      <div class="fc2_FigCall2Title">
        <b class="Bold">Figure&nbsp;6-4&nbsp;&nbsp;</b><a name="311473">Choose Add Resource</a></div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023Format">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="292505">In Add Resource, specify the CSS file to place in the resource folder.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="292569">In Source File, type the path to the CSS file, or choose Browse to locate and select the file.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="292578">In File Name, optionally type a new name for the CSS file.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="292584">In Folder, the read-only path value shows the location of the BIRT resource folder. Add the CSS file to this root folder, or choose Browse to select a subfolder in which to place the CSS file.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_i2_Indent2"><a href="#311461" title="How to link a CSS file" name="311455">Figure&nbsp;6-5</a> shows an example of values specified in Add Resource.</div>
      <p class="i3_Image3"><a name="311459"><img class="Default" src="images/selectcssfile.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 6-5 Add Resource with values supplied" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;6-5&nbsp;&nbsp;</b><a name="311461">Add Resource with values supplied</a></div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">4&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="382712">Choose Finish. The CSS file appears in Resource Explorer, and it is available to any report design. Expand the file to display all styles, as shown in </a><a href="#382721" title="How to link a CSS file">Figure&nbsp;6-6</a>.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i3_Image3"><a name="382719"><img class="Default" src="images/libexp_with_css.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 6-6 Resource Explorer showing the styles in a CSS file" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;6-6&nbsp;&nbsp;</b><a name="382721">Resource Explorer showing the styles in a CSS file</a></div>
      <div class="N_n1_NumList1_outer" style="margin-left: 0pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n1_NumList1_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023Format">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n1_NumList1_inner"><a name="292647">Link the CSS file to the report by performing the following tasks:</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="292785">Choose Outline.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="311431">Right-click Styles, then choose Use CSS File, as shown in </a><a href="#311437" title="How to link a CSS file">Figure&nbsp;6-7</a>.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i3_Image3"><a name="311435"><img class="Default" src="images/css_in_outline.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 6-7 Choose Use CSS File" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;6-7&nbsp;&nbsp;</b><a name="311437">Choose Use CSS File</a></div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">3&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="311416">In Use CSS, choose Browse to select the CSS file to link to the report. The Browse dialog, shown in </a><a href="#311425" title="How to link a CSS file">Figure&nbsp;6-8</a>, displays the resource folder and the CSS files in the folder.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i3_Image3"><a name="311423"><img class="Default" src="images/cssbrowse.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 6-8 Browse showing the CSS file in the resource folder" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;6-8&nbsp;&nbsp;</b><a name="311425">Browse showing the CSS file in the resource folder</a></div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">4&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="438530">Select the CSS file, then choose OK. Use CSS displays the selected CSS file and the styles in that file, as shown in </a><a href="#438539" title="How to link a CSS file">Figure&nbsp;6-9</a>.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i3_Image3"><a name="438537"><img class="Default" src="images/usecss.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 6-9 Use CSS showing the selected CSS file and its styles" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;6-9&nbsp;&nbsp;</b><a name="438539">Use CSS showing the selected CSS file and its styles</a></div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">5&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="293074">Optionally, link a CSS file at report view time, using the following steps. Use this option to apply HTML-only selectors, such as :link and :visited to customize the style of hyperlinks.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n3_NumList3_outer" style="margin-left: 28.3464566929134pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n3_NumList3_inner" style="width: 14.173228346456703pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray2">1&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n3_NumList3_inner"><a name="381468">Choose Include CSS file at view time.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n3_NumList3_outer" style="margin-left: 28.3464566929134pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n3_NumList3_inner" style="width: 14.173228346456703pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray2">2&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n3_NumList3_inner"><a name="381481">In URI, type the location of the CSS file. Type a full or relative URL.</a></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="N_n2_NumList2_outer" style="margin-left: 14.1732283464567pt">
        <table border="0" cellspacing="0" cellpadding="0" summary="" role="presentation">
          <tr style="vertical-align: baseline">
            <td>
              <div class="N_n2_NumList2_inner" style="width: 14.1732283464567pt; white-space: nowrap">
                <span class="zAuto_0023FormatGray">6&nbsp;&nbsp;</span>
              </div>
            </td>
            <td width="100%">
              <div class="N_n2_NumList2_inner"><a name="381461">Choose OK. The linked CSS file and its styles appear under Styles in Outline, as shown in </a><a href="#293137" title="How to link a CSS file">Figure&nbsp;6-10</a>. The style names appear in gray, indicating that they are not defined in the report design, but rather, are linked from an external file.</div>
            </td>
          </tr>
        </table>
      </div>
      <p class="i3_Image3"><a name="293126"><img class="Default" src="images/format.06.04.7.png" style="display: inline; float: none; left: 0.0; top: 0.0" alt="Figure 6-10 Outline showing a linked CSS file and its styles" /></a></p>
      <div class="fc3_FigCall3Title">
        <b class="Bold">Figure&nbsp;6-10&nbsp;&nbsp;</b><a name="293137">Outline showing a linked CSS file and its styles</a></div>
    </blockquote>
    <hr align="left" />
    <table align="right" summary="">
      <tr>
        <td class="WebWorks_Company_Name_Bottom">
          <a href="notices.html">(c) Copyright Actuate Corporation 2013</a>
        </td>
      </tr>
    </table>
  </body>
</html>